<template>
  <div class="gl-border">

    <div class="content-item">
      <base-info-select :queryParams="queryParams">
        <el-input v-model="queryParams.key"
                  placeholder="请输入学生学号或姓名"
                  size="small"
                  style="width: 215px;margin-top: 15px;"></el-input>
      </base-info-select>

      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
      <el-button type=""
                 size="small"
                 @click="reset">重置</el-button>
      <el-button type=""
                 size="small"
                 @click="uploadShow = true"
                 v-if="roleName !=='年级辅导员'">批量导入</el-button>
      <!-- <el-button type=""
                 size="small"
                 @click="downExl"
                 :disabled="roleName ==='年级辅导员'">下载导入模板</el-button> -->
      <a href=".././住宿信息导入模板.xls"
         v-if="roleName !=='年级辅导员'"
         class="g-button">下载导入模板</a>
    </div>
    <div class="content-item">
      <p>
        <span>总人数：{{personData.totalNum}}人 &nbsp;&nbsp;</span>
        <span>已入住：{{personData.checkInNum}}人&nbsp;&nbsp;</span>
        <span>未入住：{{personData.notCheckInNum}}人</span>
      </p>
      <TabList :tabData="tabData"
               class="table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
    <dialog-edit :dialogShow="dialogShow"
                 :dialogForm="dialogForm"
                 :bedId="bedId"
                 :query="query"
                 ref="dialogForm"
                 @handleClose="handleClose"></dialog-edit>
    <dialog-up-load :dialogShow="uploadShow"
                    :handleClose="handleClose"
                    :beforeUpload="beforeUpload"
                    :successUploadCallback="successUploadCallback"
                    :remove="remove"
                    :fileList="fileList"></dialog-up-load>
  </div>
</template>
<script>
import dialogEdit from './dialog-edit'
import { pagination } from '@/tools/mixin'
import dialogUpLoad from './dialog-upLoad'
import { downExl } from '@/tools/utils'
import {
  listCheckInInfoUsingPOST,
  countStudentNumUsingPOST
} from '@api/auto'
import baseInfoSelect from '@components/baseInfoSelect'
export default {
  components: {
    dialogEdit,
    dialogUpLoad,
    baseInfoSelect
  },
  mixins: [pagination],
  data () {
    return {
      total: 0,
      queryParams: {
        size: 10,
        page: 1,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        sex: null,
        key: null
      },
      personData: {
        checkInNum: 0,
        notCheckInNum: 0,
        totalNum: 0
      },
      dialogShow: false,
      bedId: null,
      uploadShow: false,
      dialogForm: {},
      fileList: [],
      tabData: [],
      columns: [
        { label: '学号', prop: 'sn' },
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' },
        { label: '学生类型', prop: 'objectOrientedName' },
        { label: '学院', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '年级', prop: 'gradeName' },
        { label: '班级', prop: 'className' },
        { label: '入住信息', prop: 'checkInInfo' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        {
          label: '入住信息',
          prop: 'checkInInfo',
          tem: `<span>{{row.checkInInfo || '--'}}</span>`
        },
        { label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.edit(row)" :disabled="that.$parent.roleName ==='年级辅导员'">调整</el-button>
        <el-button type="text" @click="that.$parent.intoEditHistory(row)" :disabled="that.$parent.roleName ==='年级辅导员'">调整记录</el-button>
        </div>` }
      ]
    }
  },
  created () {
    this.query()
  },
  computed: {
    roleName () {
      return JSON.parse(sessionStorage.userInfo).roleName
    }
  },
  methods: {
    edit (row) {
      this.dialogForm = Object.assign({ ...row, adjustType: null }, {
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomId: null,
        bedId: null
      })
      this.dialogShow = true
      this.bedId = row.bedId
    },
    intoEditHistory (row) {
      sessionStorage.stuInfo = JSON.stringify(row)
      this.$router.push({ name: 'editHistory' })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listCheckInInfoUsingPOST(this.queryParams).then(res => {
        this.tabData = res.data ? res.data.list : []
        this.total = res.data ? res.data.total : 0
      })
      countStudentNumUsingPOST(this.queryParams).then(res => {
        if (res.data) {
          this.personData = res.data
        } else {
          this.personData = {
            checkInNum: 0,
            notCheckInNum: 0,
            totalNum: 0
          }
        }
      })
    },
    reset () {
      this.queryParams = {
        size: 10,
        page: 1,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        sex: null,
        key: null
      }
      this.query()
    },
    handleClose () {
      this.dialogShow = false
      this.uploadShow = false
      this.fileList = []
    },
    // 上传之前
    beforeUpload (file) {
      if (file.size > 1024 * 1024 * 5) {
        this.$message.error('文件大小不能超过5M')
        return false
      }
      // if (file.type !== 'application/vnd.ms-excel' && file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
      //   this.$message.error('只能上传.xls和.xlsx文件')
      //   return false
      // }
    },
    // 上传回调
    successUploadCallback (response, file, fileList) {
      if (!response.data && response.status) {
        this.handleClose()
        this.query()
        this.$message.success('导入成功')
      } else if (!response.status && !response.data) {
        this.$message.error(response.message || '操作失败')
      } else {
        this.handleClose()
        this.query()
        this.$message.success('导入成功,错误信息部分正在生成')
        downExl(response.data, '导入错误信息')
        this.fileList = []
      }
    },
    errorUploadCallback (err, file, fileList) {
      console.log(err)
    },
    downExl () {
      downExl('.././住宿信息导入模板.xls', '住宿信息导入模板.xls')
    },
    // 删除模板
    remove (file, fileList) {
    }

  }
}
</script>
